window.onload = function () {

    headercolor();
    timeback();
    banner();
}
//头部渐变
function headercolor() {
    var banner = document.querySelector('.jd_banner');
    var bannerHeight = banner.offsetHeight;
    var header = document.querySelector('.jd_header')
    window.onscroll = function () {

        var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollHeight <= bannerHeight) {

            var opacity = scrollHeight / bannerHeight;
            // console.log(opacity);
            header.style.background = "rgb(233,35,34," + opacity + ")";
        }
    }
}
//掌上秒杀
function timeback() {
    var spans = document.querySelectorAll('.jd_sk_time>span');
    var time = 600;
    var timerId = setInterval(function () {
        if (time == 0) {
            clearInterval(timerId);
            return;
        }
        time--;
        // console.log(time);
        var hour = Math.floor(time / 60 / 60);
        var minute = Math.floor(time % 3600 / 60);
        var second = Math.floor(time % 60);

        spans[0].innerHTML = Math.floor(hour / 10);
        spans[1].innerHTML = hour % 10;

        spans[3].innerHTML = Math.floor(minute / 10);
        spans[4].innerHTML = minute % 10;

        spans[6].innerHTML = Math.floor(second / 10);
        spans[7].innerHTML = second % 10;

    }, 1000)

}

function banner() {
    var banner = $('.jd_banner');
    var ulbox = $('.jd_banner>ul:first-of-type');
    var first = $('.bannerimg>li:eq(0)');
    var last = $('.bannerimg>li:eq(7)');
    var bannerWidth = banner.width();
    var lis = ulbox.find('li');
    var dians = banner.find('.jd_bannercircle').find('li');


    console.log(last, 111);

    //前后各clone一张图片
    last.clone().insertBefore(first);
    ulbox.append(first.clone());

    //重新获取图片的张数
    lis = $('.bannerimg > li');
    var count = lis.length;
    //重置ul和li 的宽度
    ulbox.width(bannerWidth * count);
    lis.each(function (index, value) {
        $(value).width(bannerWidth);
    })

    //让图片从第二张开始显示，如果用left，就要定位，如果是relative，父盒子的高度为0；所有用relative，不脱离文档流。
    // ulbox.style.left = -bannerWidth + 'px';
    ulbox.css('left', -bannerWidth);
    var index = 1;
    //自动轮播

    function move() {
            ulbox.animate({
                'left': -index * bannerWidth
            }, 500, function () {
                clearInterval(timerId);
                setInterval
                if (index == count - 1) {
                    index = 1
                    ulbox.css('left', -index * bannerWidth);
                }
                dians.removeClass('current');
                $('.jd_bannercircle li:eq('+(index-1) +')').addClass('current');
            })
        
    }
    var timerId ;
    function interval(){
        var timerId = setInterval(function(){
            index++;
            move();
        },1000);
    }
    interval();
    //手动滑动
    ulbox.on('swipeLeft',function(){
        console.log('swipeLeft');
        clearInterval(timerId);
        index++;
        move();
    })
    ulbox.on('swipeRight',function(){
        console.log('swipeRight');
        clearInterval(timerId);
        index--;
        move();
    })
}